import { Button, Input, Form } from 'antd';
import { useHistory } from 'react-router-dom'
import React, { useState } from 'react';
import './index.scss'

function LoginPage() {
  const [channelName, setChannelName] = useState('test');
  const [userName, setUserName] = useState(null);
  const history = useHistory();
  const handleLoginClick = () => {
    if (channelName && userName) {
      history.push(`/detail/${channelName}/${userName}`)
    }
  }

  const handleGotoReduxPage = () => {
    if (channelName && userName) {
      history.push(`/detailredux/${channelName}/${userName}`)
    }
  }

  return (
    <div className='login-container'>
      <Form
        name="basic"
        initialValues={{ remember: true }}
      >
        <Form.Item
          label="user Name"
          name="userName"
          rules={[{ required: true, message: 'Please input your userName name!' }]}
        >
          <Input value={userName} placeholder="Please input your user name!" onChange={(e) => { setUserName(e.target.value) }} />
        </Form.Item>
        <Form.Item
          label="Channel Name"
          name="channelName"
          rules={[{ required: true, message: 'Please input your user name!' }]}
        >
          <Input value={channelName} disabled placeholder="channel name is:test(if join failure, refresh token)" onChange={(e) => { setChannelName(e.target.value) }} />
        </Form.Item>
      </Form>
      <Button onClick={handleLoginClick} type='primary'> Log in (react hoocks)</Button>
      <Button onClick={handleGotoReduxPage} type='primary'> Log in (redux version)</Button>
    </div>
  )
}

export default LoginPage;